<template>
  <div class="stepList">
      <van-row type="flex" justify="space-between" class="mode">
            <span class="mode1">烹饪步骤</span>
            <span class="mode2 link" @click="show=true">点击图片进入烹饪模式</span>
    </van-row>
    <MenuDetailStepList 
        :recipe="recipe" 
        v-for="(step,index) in recipe.cookstep" 
        :key="index" 
        :step="step" 
        :length="length"
    />
    <p class="time">{{recipe.release_time}}</p>

    <van-image-preview v-model="show" :images="images" @change="onChange" :loop="false">
        <template v-slot:index>{{ index }}/{{images.length}}</template>
        <template v-slot:cover>
            <div class="image_text">
                {{ recipe.cookstep[index-1].content }}
            </div>
        </template>
    </van-image-preview>
  </div>
</template>

<script>
import MenuDetailStepList from  "@/components/MenuDetailStepList.vue"
export default {
    props:["recipe"],
    components:{
        MenuDetailStepList,
    },
    data() {
        return {
            show: false,
            index: 1,
        };
  },
    computed:{
        length: function(){
            return this.recipe.cookstep.length;
        },
        images: function(){
            return this.recipe.cookstep.map( item => item.image);
        }
    },
    methods:{
        onChange(index) {
            this.index = index+1;
        },
    }
}
</script>

<style lang="less" >
.stepList{
    margin-top: 15px;
    .mode{
        height: 40px;
        line-height: 40px;
        background-color: white;
        .mode1{
            font-weight: 600;
            margin-left: 15px;
        }
        .mode2{
            font-size: 13px;
            margin-right: 15px;
        }
    }
    .link{
        color: #50969f;
    }
    .time{
        margin: 5px 0 0 15px;
        font-size: 12px;
        color: #a5a5a5;
    }
    .van-image-preview{
        .van-image-preview__swipe{
            background-color: black;
        }
        .van-image-preview__cover{
            color: white;
            top: 100%;
            transform: translateY(-100%);
            .image_text{
                line-height: 25px;
                padding: 0 15px;
                margin-bottom: 40px;
            }
        }
    }
}
</style>